<template>

    <div class="common-layout">
        <el-container class="index-con">
            <el-aside class="index-aside" style="width: 240px;">
                <el-menu default-active="/ex/text-socre" class="side-menu" router
                    :background-color="isNightMode ? '#1a1a1a' : '#f5f7fa'"
                    :text-color="isNightMode ? '#e0e0e0' : '#2c3e50'" :active-text-color="'#409EFF'"
                    style="height: 100%;">
                    <div class="system-title">
                        <span class="title-text">NERV</span>
                        <div class="title-decoration"></div>
                    </div>
                    <el-menu-item class="create-exam-item">
                        <el-button type="primary" class="create-exam-btn" @click="goToCreateExam">
                            <el-icon>
                                <Plus />
                            </el-icon>
                            创建考试
                        </el-button>
                    </el-menu-item>
                    <el-menu-item index="/exam" class="menu-item">
                        <el-icon>
                            <Expand />
                        </el-icon>
                        <span>考试管理</span>
                    </el-menu-item>
                    <el-menu-item index="/ex/mark-exam" class="menu-item">
                        <el-icon>
                            <School />
                        </el-icon>
                        <span>人工评卷</span>
                    </el-menu-item>
                    <el-sub-menu class="menu-item" :index="'/analysis'" @click="handleAnalysisClick">
                        <template #title>
                            <el-icon><DataAnalysis /></el-icon>
                            <span>分析</span>
                        </template>
                        <el-menu-item index="/ex/text-socre" class="submenu-item">
                            <el-icon><Histogram /></el-icon>
                            <span>考试成绩</span>
                        </el-menu-item>
                       
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="main-header">
                    <Header default-active="/exam" />
                </el-header>
                <el-main>
                    <div class="score-statistics">
                        <div class="search-bar">
                            <div class="left-section">
                             
                                <div class="search-input">
                                    <el-date-picker v-model="startTime" type="date" placeholder="开始时间"
                                        class="time-input" :size="size" @change="handleSearch" />
                                    <el-date-picker v-model="endTime" type="date" placeholder="结束时间" class="time-input"
                                        :size="size" @change="handleSearch" />
                                    <el-input v-model="searchText" placeholder="请输入名称查询" class="search-text"
                                        :size="size" @keyup.enter="handleSearch">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>
                                    <el-button type="primary" @click="handleSearch" :size="size">
                                        <el-icon><Search /></el-icon>搜索
                                    </el-button>
                                </div>
                            </div>
                            <!-- <div class="right-section">
                                <el-button class="export-btn" :size="size">
                                    <el-icon>
                                        <Download />
                                    </el-icon>
                                    导出数据
                                </el-button>
                            </div> -->
                        </div>

                        <div class="table-section">
                            <el-table :data="tableData" style="width: 100%" border v-loading="loading" :header-cell-style="{
                                background: '#f8faff',
                                color: '#2c3e50',
                                fontWeight: '600',
                                fontSize: '14px'
                            }" :cell-style="{
                    fontSize: '14px',
                    padding: '12px 0'
                }">
                                <el-table-column type="selection" width="50" />
                                <el-table-column prop="examName" label="考试名称" min-width="180">
                                    <template #default="scope">
                                        <span class="exam-name">{{ scope.row.examName }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="participants" label="参加人次" width="100" align="center" />
                                <el-table-column prop="qualified" label="及格人次" width="100" align="center" />
                                <el-table-column prop="passRate" label="及格率" width="100" align="center">
                                    <template #default="scope">
                                        <span>{{ scope.row.passRate }}%</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="avgScore" label="平均分" width="100" align="center">
                                    <template #default="scope">
                                        <span>{{ scope.row.avgScore.toFixed(2) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="highestScore" label="最高分" width="100" align="center">
                                    <template #default="scope">
                                        <span>{{ scope.row.highestScore.toFixed(2) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="lowestScore" label="最低分" width="100" align="center">
                                    <template #default="scope">
                                        <span>{{ scope.row.lowestScore.toFixed(2) }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="correctRate" label="正确率" width="100" align="center">
                                    <template #default="scope">
                                        <el-progress :percentage="scope.row.correctRate" :color="customColors"
                                            :stroke-width="8" />
                                    </template>
                                </el-table-column>
                                <el-table-column prop="scoreRate" label="得分率" width="100" align="center">
                                    <template #default="scope">
                                        <el-progress :percentage="scope.row.scoreRate" :color="customColors"
                                            :stroke-width="8" />
                                    </template>
                                </el-table-column>
                               
                            </el-table>

                            <div class="pagination">
                                <span class="page-text">共 {{ total }} 条记录</span>
                                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                                    :page-sizes="[10, 20, 30, 50]" layout="sizes, prev, pager, next" :total="total"
                                    @size-change="handleSizeChange" @current-change="handleCurrentChange" background />
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>
        </el-container>


    </div>

    <!-- 考生成绩详情对话框 -->
    <el-dialog v-model="dialogVisible" :title="currentExam.examName" width="99%" :before-close="handleClose"
        class="exam-detail-dialog">
        <div class="exam-tabs">
            <el-tabs v-model="activeTab" class="border-card-tabs">
                <el-tab-pane label="考试分析" name="scores">
                    <div class="exam-stats">
                        <div class="stats-header">
                            <div class="stats-item">
                                <span class="label">应参加人数</span>
                                <span class="value">{{ currentExam.participants || 0 }}</span>
                                <span class="percentage">100%</span>
                            </div>
                            <div class="stats-item">
                                <span class="label">已参加人数</span>
                                <span class="value">{{ currentExam.actualParticipants || 0 }}</span>
                                <span class="percentage">{{ currentExam.actualParticipants && currentExam.participants ? ((currentExam.actualParticipants / (currentExam.participants || 1)) * 100).toFixed(1) : 0 }}%</span>
                            </div>
                            <div class="stats-item">
                                <span class="label">缺考人数</span>
                                <span class="value">{{ currentExam.absentCount || 0 }}</span>
                                <span class="percentage">{{ currentExam.absentCount && currentExam.participants ? ((currentExam.absentCount / (currentExam.participants || 1)) * 100).toFixed(1) : 0 }}%</span>
                            </div>
                            <div class="stats-item">
                                <span class="label">及格人数</span>
                                <span class="value">{{ currentExam.qualified || 0 }}</span>
                                <span class="percentage">{{ currentExam.passRate || 0 }}%</span>
                            </div>
                            <div class="stats-item">
                                <span class="label">不及格人数</span>
                                <span class="value">{{ currentExam.actualParticipants && currentExam.qualified ? currentExam.actualParticipants - currentExam.qualified : 0 }}</span>
                                <span class="percentage">{{ currentExam.actualParticipants && currentExam.qualified ? (100 - currentExam.passRate).toFixed(1) : 0 }}%</span>
                            </div>
                            <div class="stats-item">
                                <span class="label">正确率</span>
                                <span class="value">{{ currentExam.correctRate || 0 }}%</span>
                                <el-icon class="check-icon">
                                    <Check />
                                </el-icon>
                            </div>
                            <div class="stats-item">
                                <span class="label">得分率</span>
                                <span class="value">{{ currentExam.scoreRate || 0 }}%</span>
                                <el-icon class="star-icon">
                                    <Star />
                                </el-icon>
                            </div>
                            <div class="stats-item">
                                <span class="label">最高分</span>
                                <span class="value">{{ currentExam.highestScore || 0 }}</span>
                                <span class="percentage">{{ currentExam.highestScore && currentExam.totalScore ? ((currentExam.highestScore / currentExam.totalScore) * 100).toFixed(1) : 0 }}%</span>
                            </div>
                            <div class="stats-item">
                                <span class="label">平均分</span>
                                <span class="value">{{ currentExam.avgScore || 0 }}</span>
                                <span class="percentage">{{ currentExam.avgScore && currentExam.totalScore ? ((currentExam.avgScore / currentExam.totalScore) * 100).toFixed(1) : 0 }}%</span>
                            </div>
                            <div class="stats-item">
                                <span class="label">最低分</span>
                                <span class="value">{{ currentExam.lowestScore || 0 }}</span>
                                <span class="percentage">{{ currentExam.lowestScore && currentExam.totalScore ? ((currentExam.lowestScore / currentExam.totalScore) * 100).toFixed(1) : 0 }}%</span>
                            </div>
                        </div>
                        
                        <!-- 分数分布 -->
                        <div class="score-distribution" v-if="currentExam.scoreDistribution">
                            <h3>分数分布</h3>
                            <div class="distribution-chart">
                                <div class="distribution-bar" v-for="(value, range) in currentExam.scoreDistribution" :key="range">
                                    <div class="bar-label">{{ range }}</div>
                                    <div class="bar-container">
                                        <div class="bar-fill" :style="{ width: value + '%', backgroundColor: getDistributionColor(range) }"></div>
                                    </div>
                                    <div class="bar-value">{{ value }}%</div>
                                </div>
                            </div>
                        </div>

                        <!-- 其他考试信息 -->
                        <div class="exam-info">
                            <h3>考试信息</h3>
                            <el-descriptions :column="2" border>
                                <el-descriptions-item label="考试名称">{{ currentExam.examName }}</el-descriptions-item>
                                <el-descriptions-item label="科目">{{ currentExam.subject }}</el-descriptions-item>
                                <el-descriptions-item label="开始时间">{{ currentExam.startTime }}</el-descriptions-item>
                                <el-descriptions-item label="结束时间">{{ currentExam.endTime }}</el-descriptions-item>
                                <el-descriptions-item label="总分">{{ currentExam.totalScore }}</el-descriptions-item>
                                <el-descriptions-item label="及格分">{{ currentExam.passScore }}</el-descriptions-item>
                            </el-descriptions>
                        </div>

                        <!-- 学生成绩列表 -->
                        <div class="student-table">
                            <div class="table-actions">
                                <el-select v-model="sortOrder" placeholder="按成绩排序" class="sort-select">
                                    <el-option label="成绩升序" value="asc" />
                                    <el-option label="成绩降序" value="desc" />
                                </el-select>
                                <div class="search-box">
                                    <el-input v-model="studentSearch" placeholder="请输入姓名/学号搜索" class="search-input">
                                        <template #prefix>
                                            <el-icon>
                                                <Search />
                                            </el-icon>
                                        </template>
                                    </el-input>
                                    <el-button type="primary" class="refresh-btn">
                                        <el-icon>
                                            <Refresh />
                                        </el-icon>
                                    </el-button>
                                </div>
                            </div>
                            <el-table :data="studentData" border style="width: 100%" :header-cell-style="{
                                background: '#f8faff',
                                color: '#2c3e50',
                                fontWeight: '600',
                                fontSize: '14px',
                                padding: '12px 0'
                            }" :cell-style="{
                                    fontSize: '14px',
                                    padding: '12px 0'
                                }">
                                <el-table-column type="index" label="序号" width="80" align="center" />
                                <el-table-column prop="name" label="姓名" width="120" align="center" />
                                <el-table-column prop="department" label="所属部门" min-width="180" align="center" />
                                <el-table-column prop="duration" label="用时" width="120" align="center" />
                                <el-table-column label="总分/总题分" width="150" align="center">
                                    <template #default="scope">
                                        <span class="score-fraction">{{ scope.row.score }}/{{ scope.row.totalScore
                                            }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="score" label="成绩" width="100" align="center">
                                    <template #default="scope">
                                        <span class="score">{{ scope.row.score }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="correctRate" label="正确率" width="120" align="center">
                                    <template #default="scope">
                                        <span class="rate">{{ scope.row.correctRate }}%</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="scoreRate" label="得分率" width="120" align="center">
                                    <template #default="scope">
                                        <span class="rate">{{ scope.row.scoreRate }}%</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="是否及格" width="120" align="center">
                                    <template #default="scope">
                                        <el-tag :type="scope.row.isPassed ? 'success' : 'danger'" class="status-tag">
                                            {{ scope.row.isPassed ? '及格' : '不及格' }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="考试方式" width="120" align="center">
                                    <template #default="scope">
                                        <el-tag type="info" class="exam-type-tag">{{ scope.row.examType }}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="状态" width="100" align="center">
                                    <template #default="scope">
                                        <el-tag :type="scope.row.status === '已提交' ? 'success' : 'warning'"
                                            class="status-tag">
                                            {{ scope.row.status }}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="rank" label="排名" width="80" align="center" />
                            </el-table>
                            <div class="pagination">
                                <span class="page-text">共 {{ manualTotal }} 条记录</span>
                                <el-pagination v-model:current-page="manualCurrentPage"
                                    v-model:page-size="manualPageSize" :page-sizes="[10, 20, 30, 50]"
                                    layout="sizes, prev, pager, next" :total="manualTotal"
                                    @size-change="handleManualSizeChange" @current-change="handleManualCurrentChange"
                                    background />
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { Plus, Search, Download, DataAnalysis, Histogram, School, Expand, CloseBold, FolderChecked, Refresh, User, Check, Star } from '@element-plus/icons-vue';
import Header from '@/components/Header.vue';
import { useRouter } from 'vue-router';
import { useTheme } from '@/stores/themeStore';
import { ElMessageBox, ElMessage } from 'element-plus';
import examApi from '@/api/exam';
import dayjs from 'dayjs';

const router = useRouter();
const themeStore = useTheme();
const isNightMode = computed(() => themeStore.isNightMode);

const searchText = ref('');
const startTime = ref('');
const endTime = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const size = ref('large');
const loading = ref(false);

const customColors = [
    { color: '#f56c6c', percentage: 20 },
    { color: '#e6a23c', percentage: 40 },
    { color: '#5cb87a', percentage: 60 },
    { color: '#1989fa', percentage: 80 },
    { color: '#6f7ad3', percentage: 100 }
];

const tableData = ref([]);

// 获取考试成绩列表
const fetchExamScoreList = async () => {
  loading.value = true;
  try {
    // 处理日期格式化
    const formattedStartTime = startTime.value ? dayjs(startTime.value).format('YYYY-MM-DD') : '';
    const formattedEndTime = endTime.value ? dayjs(endTime.value).format('YYYY-MM-DD') : '';
    
    const params = {
      startTime: formattedStartTime,
      endTime: formattedEndTime,
      searchText: searchText.value,
      pageNum: currentPage.value,
      pageSize: pageSize.value
    };
    
    const response = await examApi.getExamScoreList(params);
    
    if (response.code === 200) {
      tableData.value = response.data.data;
      total.value = response.data.total;
    } else {
      ElMessage.error(response.message || '获取考试成绩列表失败');
    }
  } catch (error) {
    console.error('获取考试成绩列表失败:', error);
    ElMessage.error('获取考试成绩列表失败');
  } finally {
    loading.value = false;
  }
};

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
  fetchExamScoreList();
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  fetchExamScoreList();
};

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchExamScoreList();
};

// 对话框相关
const dialogVisible = ref(false);
const activeTab = ref('scores');
const currentExam = ref({});

// 模拟学生数据
const studentData = ref([
    {
        name: '小帅',
        department: '数学院',
        duration: '22分钟',
        score: 100,
        totalScore: 60,
        correctRate: 100,
        scoreRate: 100,
        isPassed: true,
        examType: '电脑',
        status: '已提交',
        rank: 1
    }
]);

const handleAnalysis = async (row) => {
    try {
      // 显示加载中状态
      dialogVisible.value = true;
      // 根据考试ID获取详情
      const response = await examApi.getExamScoreDetail(row.examId);
      if (response.code === 200) {
        // 更新当前考试详情
        currentExam.value = response.data;
        
        // 如果scoreRate或correctRate为null，设置默认值
        if (currentExam.value.scoreRate === null) {
          currentExam.value.scoreRate = 0;
        }
        if (currentExam.value.correctRate === null) {
          currentExam.value.correctRate = 0;
        }
        
        // 这里可以添加获取考生成绩列表的逻辑
        // TODO: 获取考试的考生成绩列表
      } else {
        ElMessage.error(response.message || '获取考试详情失败');
        dialogVisible.value = false;
      }
    } catch (error) {
      console.error('获取考试详情失败:', error);
      ElMessage.error('获取考试详情失败');
      dialogVisible.value = false;
    }
};

const handleClose = (done) => {
    ElMessageBox.confirm('确认关闭？')
        .then(() => {
            done();
        })
        .catch(() => { });
};

const goToCreateExam = () => {
    router.push({ name: 'CreateExam' });
};

const sortOrder = ref('desc');
const studentSearch = ref('');
const manualTotal = ref(1);
const manualCurrentPage = ref(1);
const manualPageSize = ref(10);

const handleManualSizeChange = (val) => {
    console.log(`每页 ${val} 条`);
};

const handleManualCurrentChange = (val) => {
    console.log(`当前页: ${val}`);
};

const isAnalysisExpanded = ref(false);

const handleAnalysisClick = () => {
    isAnalysisExpanded.value = !isAnalysisExpanded.value;
};

// 页面加载时获取数据
onMounted(() => {
  fetchExamScoreList();
});

// 获取分数分布颜色
const getDistributionColor = (range) => {
  const colors = {
    '0-60': '#f56c6c',   // 红色（不及格）
    '60-70': '#e6a23c',  // 橙色（及格）
    '70-80': '#5cb87a',  // 绿色（中等）
    '80-90': '#1989fa',  // 蓝色（良好）
    '90-100': '#6f7ad3'  // 紫色（优秀）
  };
  
  return colors[range] || '#409EFF';
};
</script>

<style scoped>
.index-con {
    width: 100vw;
    height: 100vh;
    background-color: var(--el-bg-color);
}

.index-aside {
    background-color: var(--el-menu-bg-color);
    border-right: 1px solid var(--el-border-color-lighter);
    transition: all 0.3s ease;
}

.system-title {
    padding: 20px;
    text-align: center;
    position: relative;
}

.title-text {
    font-size: 28px;
    font-weight: 600;
    background: linear-gradient(45deg, #409EFF, #36d1dc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
}

.title-decoration {
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #409EFF, transparent);
    margin: 10px auto 0;
}

.create-exam-item {
    padding: 20px !important;
    margin: 0 !important;
    height: auto !important;
}

.create-exam-btn {
    width: 100%;
    height: 44px;
    font-size: 16px;
    border-radius: 8px;
    background: linear-gradient(45deg, #409EFF, #36d1dc);
    border: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.create-exam-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.menu-item {
    margin: 4px 0;
    border-radius: 4px;
}

.submenu-item {
    padding-left: 54px !important;
}

.main-header {
    background-color: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color-lighter);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.index-main {
    padding: 20px;
    background-color: var(--el-bg-color-page);
}

.search-section {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.status-select,
.category-select {
    width: 160px;
}

.search-input {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
    align-items: center;
}

.time-input {
    width: 130px !important;
}

.search-text {
    width: 180px !important;
}

.create-btn {
    background: linear-gradient(135deg, #409EFF, #36d1dc);
    border: none;
    padding: 12px 24px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.export-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 12px 24px;
    border: 1px solid #dcdfe6;
    color: #606266;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.export-btn:hover {
    color: #409EFF;
    border-color: #409EFF;
    background: #ecf5ff;
    transform: translateY(-2px);
}

.table-section {
    background: var(--el-bg-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.score-statistics {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: calc(100vh - 60px);
    transition: all 0.3s ease;
}

.search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.left-section {
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.search-input {
    display: flex;
    gap: 16px;
    flex: 1;
    min-width: 0;
    /* 防止flex子元素溢出 */
}

.time-input {
    width: 160px !important;
}

.search-text {
    width: 200px !important;
}

.create-btn {
    flex-shrink: 0;
    /* 防止按钮被压缩 */
    background: linear-gradient(135deg, #409EFF, #36d1dc);
    border: none;
    padding: 12px 24px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.export-btn {
    flex-shrink: 0;
    /* 防止按钮被压缩 */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 12px 24px;
    border: 1px solid #dcdfe6;
    color: #606266;
    transition: all 0.3s ease;
    border-radius: 8px;
}

:deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #dcdfe6 inset !important;
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 0 8px;
}

:deep(.el-date-editor .el-input__wrapper) {
    padding-left: 30px;
}

:deep(.el-input__inner) {
    font-size: 14px;
    height: 32px;
    line-height: 32px;
}

:deep(.el-date-editor.el-input) {
    --el-date-editor-width: 160px;
}

.exam-name {
    color: #409EFF;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px 8px;
    border-radius: 4px;
}

.exam-name:hover {
    color: #66b1ff;
    background-color: #ecf5ff;
}

.analysis-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    padding: 6px 12px;
    border-radius: 6px;
}

.analysis-btn:hover {
    transform: translateY(-1px);
    background-color: #ecf5ff;
}

.pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
}

.page-text {
    color: #606266;
    font-size: 14px;
}

:deep(.el-pagination) {
    --el-pagination-hover-color: #409EFF;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
    background-color: #409EFF;
    transition: all 0.3s ease;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled):hover) {
    color: #409EFF;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
    background-color: #f5f7fa;
}

:deep(.el-progress-bar__outer) {
    border-radius: 6px;
    background-color: #f5f7fa;
}

:deep(.el-progress-bar__inner) {
    border-radius: 6px;
    transition: all 0.3s ease;
}

:deep(.el-table__inner-wrapper::before) {
    display: none;
}

:deep(.el-button) {
    border-radius: 8px;
    transition: all 0.3s ease;
}

:deep(.el-date-editor) {
    border-radius: 8px;
}

:deep(.el-select) {
    border-radius: 8px;
}

.exam-detail-dialog {
    --el-dialog-padding-primary: 0;
    display: flex;
}

:deep(.el-dialog) {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    max-height: 100vh;
    width: 95% !important;
}

:deep(.el-dialog__body) {
    flex: 1;
    overflow: auto;
    padding: 0;
}

.exam-tabs {
    padding: 0;
}

:deep(.el-dialog__header) {
    margin: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    background-color: #fff;
}

:deep(.el-dialog__title) {
    font-size: 16px;
    font-weight: 600;
}

:deep(.el-tabs) {
    background: #fff;
}

:deep(.el-tabs__header) {
    margin: 0;
    padding: 0;
}

:deep(.el-tabs__nav-wrap) {
    padding: 0 20px;
    background-color: #fff;
}

:deep(.el-tabs__item) {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding: 0 20px;
}

:deep(.el-tabs__item.is-active) {
    font-weight: 600;
    color: #409EFF;
}

:deep(.el-tabs__active-bar) {
    background-color: #409EFF;
    height: 3px;
}

.exam-stats {
    padding: 20px;
    background-color: #f5f7fa;
}

.stats-header {
    display: flex;
    gap: 8px;
    margin: 20px;
    padding: 0;
    background: transparent;
    width: 100%;

    .stats-item {
        flex: 1;
        padding: 12px 8px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: #fff;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .label {
            color: #666;
            font-size: 13px;
            text-align: center;
            white-space: nowrap;
        }

        .value {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            text-align: center;
            margin: 2px 0;
        }

        .percentage {
            font-size: 12px;
            color: #666;
            text-align: center;
        }

        .icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.8);
            margin: 0 auto;

            .el-icon {
                font-size: 14px;
                color: #1890ff;
            }
        }
    }
}

.student-table {
    margin: 20px;
}

.table-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.sort-select {
    width: 120px;
}

.search-box {
    display: flex;
    gap: 12px;
    align-items: center;
}

.search-box .search-input {
    width: 200px;
}

.refresh-btn {
    padding: 12px;
}

:deep(.el-table) {
    --el-table-border-color: #ebeef5;
    --el-table-header-bg-color: #f8faff;
    border-radius: 8px;
    overflow: hidden;
}

:deep(.el-table th) {
    background-color: var(--el-table-header-bg-color) !important;
}

.score-fraction {
    color: #606266;
}

.score {
    color: #303133;
    font-weight: 500;
}

.rate {
    color: #409EFF;
}

.status-tag {
    border-radius: 4px;
    padding: 4px 8px;
}

.exam-type-tag {
    background-color: #f4f4f5;
    color: #909399;
    border: none;
}

:deep(.el-table--border) {
    border: 1px solid #ebeef5;
}

:deep(.el-input__wrapper),
:deep(.el-select .el-input__wrapper) {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
    border-radius: 4px;
}

:deep(.el-button) {
    border-radius: 4px;
}

.qualified-icon {
    color: #67C23A;
}

.grade-link {
    color: #409EFF;
}


.filter-select {
    width: 120px;
}


.search-input {
    width: 200px;
}


.refresh-btn {
    padding: 8px;
    border: 1px solid #dcdfe6;
    color: #606266;

    &:hover {
        color: #409EFF;
        border-color: #409EFF;
        background-color: #ecf5ff;
    }
}

:deep(.el-input__wrapper) {
    border-radius: 4px;
}

:deep(.el-select .el-input__wrapper) {
    border-radius: 4px;
}

.check-icon {
    color: #409EFF;
    font-size: 16px;
    margin-top: 4px;
}

.star-icon {
    color: #409EFF;
    font-size: 16px;
    margin-top: 4px;
}

.department-stats {
    padding: 20px;
}
.feedback-content {
    padding: 20px;
}

.refresh-btn {
    padding: 8px;
}
.absent-stats {
    padding: 20px;
}

.menu-item.el-sub-menu {
    transition: all 0.3s ease;
}

:deep(.el-sub-menu__title) {
    padding-left: 20px !important;
}

:deep(.el-menu-item.submenu-item) {
    padding-left: 54px !important;
    transition: all 0.3s ease;
}

:deep(.el-sub-menu__icon-arrow) {
    transition: transform 0.3s ease;
}

:deep(.el-sub-menu.is-opened > .el-sub-menu__title .el-sub-menu__icon-arrow) {
    transform: rotateZ(180deg);
}

:deep(.el-menu-item.is-active) {
    background-color: #ecf5ff !important;
}

:deep(.el-sub-menu__title:hover) {
    background-color: #f5f7fa !important;
}

/* 分数分布样式 */
.score-distribution {
  margin-top: 30px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.score-distribution h3 {
  font-size: 16px;
  margin-bottom: 20px;
  color: #333;
}

.distribution-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.distribution-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.bar-label {
  width: 80px;
  font-size: 14px;
  text-align: right;
}

.bar-container {
  flex: 1;
  height: 20px;
  background-color: #f0f2f5;
  border-radius: 10px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: all 0.5s ease;
}

.bar-value {
  width: 60px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

/* 考试信息样式 */
.exam-info {
  margin-top: 30px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.exam-info h3 {
  font-size: 16px;
  margin-bottom: 20px;
  color: #333;
}
</style>
